<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表渲染(v-for)</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h3>固定次数循环</h3>
			<div>
				<span v-for="n in 10">{{ n }}</span>
			</div>
			<h3>使用v-for循环渲染数组中的元素</h3>
			<ul>
				<li v-for="bookName of bookNames">{{bookName}}</li>
			</ul>
			<hr >
			<h3>使用v-for循环数组中的元素，并获取下标</h3>
			<ul>
				<li v-for="(bookName, idx) of bookNames" :id="idx">{{idx}} - {{bookName}}</li>
			</ul>
			<hr >
			<h3>使用v-for循环对象属性值</h3>
			<ul>
				<li v-for="val in bookInfo">{{val}}</li>
			</ul>
			<hr >
			<h3>使用v-for循环对象属性值、键值</h3>
			<ul>
				<li v-for="(val,key) in bookInfo">{{key}}: {{val}}</li>
			</ul>
			<hr >
			<h3>使用v-for循环对象属性值、键值、下标</h3>
			<ul>
				<li v-for="(val,key,idx) in bookInfo">{{idx}} - {{key}}: {{val}}</li>
			</ul>
			<hr >
			<h3>使用v-for双层嵌套循环</h3>
			<ul>
				<li v-for="val in cities"><span v-for="city in val">{{city}}&emsp;</span></li>
			</ul>
			<hr >
		</div>
	</body>
	<script type="text/javascript">
		let vm = new Vue({
			el: '#app',
			data: {
				bookNames: ['西游记', '三国演义', '红楼梦', '水浒传'],
				bookInfo: {
					bookName: '斗破苍穹',
					price: 59.0,
					author: '天蚕土豆',
					type: '玄幻'
				},
				cities:[['郑州', '平顶山', '漯河', '商丘', '开封', '洛阳', '安阳'],['武汉', '十堰', '黄石', '襄阳', '荆州市'],['合肥', '芜湖', '蚌埠', '马鞍山']]
			}
		});
	</script>
</html>
